<!--  -->
<template>
  <div class="user_add">
    <div class="progress">
      <el-progress
        :text-inside="true"
        :stroke-width="26"
        :percentage="num"
        v-if="isShow"
      ></el-progress>
      <el-steps :active="active" finish-status="success">
        <el-step v-for="item in steps" :key="item" :title="item"></el-step>
      </el-steps>
      <el-button v-show="flag" style="margin-top: 12px" @click="next"
        >下一步</el-button
      >
    </div>

    <div class="table">
      <table border cellspacing="0" align="center" cellpadding="10px">
        <thead>
          <tr align="center">
            <th>
              全选
              <input
                v-model="checkAll"
                @click="changeCheckAll"
                type="checkbox"
              />
            </th>
            <th>名字</th>
            <th>性别</th>
            <th>所在城市</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in list" :key="index" align="center">
            <td>
              <input
                v-model="item.check"
                @click="changeCheck"
                type="checkbox"
              />
            </td>
            <td>{{ item.name }}</td>
            <td>{{ item.sex }}</td>
            <td>{{ item.city }}</td>
            <td><button @click="deleted(index)">删除</button></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      steps: ["步骤一", "步骤二", "步骤三", "步骤四", "步骤五"],
      active: 0,
      flag: true,
      checkAll: false,
      list: [
        {
          name: "张东阳",
          sex: "男",
          city: "香港",
          check: false,
        },
        {
          name: "孙悟空",
          sex: "男",
          city: "水帘洞",
          check: false,
        },
        {
          name: "猪八戒",
          sex: "男",
          city: "高老庄",
          check: false,
        },
        {
          name: "沙和尚",
          sex: "男",
          city: "流沙河",
          check: false,
        },
        {
          name: "白骨精",
          sex: "女",
          city: "白骨洞",
          check: false,
        },
        {
          name: "唐僧",
          sex: "男",
          city: "大唐",
          check: false,
        },
        {
          name: "二郎神",
          sex: "男",
          city: "天庭",
          check: false,
        },
      ],
    };
  },
  computed: {
    num() {
      return (this.active / this.steps.length) * 100;
    },
    isShow() {
      return !isNaN(parseInt((this.active / this.steps.length) * 100));
    },
  },

  methods: {
    next() {
      if (this.active++ >= this.steps.length) {
        this.active = this.steps.length;
        this.$confirm("恭喜你完成全部任务！", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "success",
        })
          .then(() => {
            this.flag = false;
          })
          .catch(() => {});
      }
    },
    changeCheckAll() {
      // 方法一：
      // for(var i=0 ;i<this.list.length;i++){
      //   this.list[i].check = !this.checkAll
      // }

      // 方法二：
      this.list.forEach((item) => (item.check = !this.checkAll));
    },
    changeCheck() {
      // 方法一
      var n = this.list.filter((v) => v.check).length + 1;
      console.log(n);
      n === this.list.length ? (this.checkAll = true) : (this.checkAll = false);

      // this.checkAll = this.list.every(v=>v.check)
    },
    deleted(index) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.list.splice(index, 1);
          this.$message({
            type: "success",
            message: "成功删除!"
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped>
.table {
  width: 60vw;
  margin: 0 auto;
}
table {
  width: 100%;
}
tr th {
  color: #fff;
  background-color: rgb(98, 88, 214);
}
td,
th {
  align-items: center;
  width: 50px;
  height: 30px;
}
</style>